<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/evaluate.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评价&打分</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<span class="artshow-name"></span>
					<span class="artshow-time"></span>
				</li>
			</ul>

			<div class="work-evaliate">
				<h5>工作打分</h5>
				<div class="artist-area">
					<div class="artist-info">
						<img class="mui-media-object mui-pull-left" data-lazyload="">
						<span class="artist-name"></span>
					</div>
					<div class="artist-evaliate" id="artistEvaliate">
						<label class="first">是否满意</label>
						<span><label>满意</label><i class="iconfont">&#xe638;</i></span>
						<span><label>不满意</label><i class="iconfont">&#xe609;</i></span>
					</div>
				</div>
				<div class="evaliate-area" id="evaliateItems">
					<!--<div class="evaliate-item">
						<label><span class="label">工作速度</span>：<span>0</span></label>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
					</div>
					<div class="evaliate-item">
						<label><span class="label">工作质量</span>：<span>0</span></label>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
					</div>
					<div class="evaliate-item">
						<label><span class="label">工作态度</span>：<span>0</span></label>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
						<i class="iconfont">&#xe65c;</i>
					</div>-->
				</div>
			</div>
			<div class="artshow-evaliate">
				<h5>活动评价</h5>
				<div class="evaliate-area">
					<textarea id="evaluateMsg"></textarea>
					<div class="my-artshow-evaliate">
						<h6>我的评价：</h6>
						<p id="myArtshowEvaliate">
							对这次的活动很满意，演出很出色. 对这次的活动很满意，演出很出色 对这次的活动很满意，演出很出色 对这次的活动很满意，演出很出色
						</p>
					</div>
				</div>
				<button class="mui-btn btn-main btn-block">提交</button>
			</div>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				// flase 表示正在进行评价 true表示已完成，正在查看
				var complete = false;
				var lazyLoad = mui('.artist-area').imageLazyload({
					placeholder: '../images/holder1.png'
				});
				var self = plus.webview.currentWebview();
				var artistId = self.artistId;
				var artshowId = self.artshowId;
				var artistEvaliate = document.getElementById("artistEvaliate");
				var evaluateMsg = document.getElementById("evaluateMsg");
				$(".artshow-name").text(self.artshowName);
				$(".artshow-time").text(self.artshowTime);
				$(".artist-name").text(self.artistName);
				$("img.mui-media-object").attr('data-lazyload', Common.artistPic + self.artistId + '.jpg?' + Math.random());
				lazyLoad.refresh(true);
				if(self.state == 6 || self.state == 7) {
					complete = true;
				} else {
					$("button").show();
				}
				
				// 未评价完毕时返回需确认
				var oldBack = mui.back;
				mui.back = function() {
					if(complete) {
						oldBack();
					} else {
						plus.nativeUI.confirm("您尚未完成评价，是否返回？", function(e) {
							if(!e.index) {
								oldBack();
							}
						}, '', ["确定", "取消"]);
					}
				}
				
				var url = baseURL + 'getEvaluate/' + artistId + '/' + artshowId + '.json?uid=23';
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						$.each(data.result, function(i, o) {
							switch(i) {
								case 'scoreList': // 评分列表
									var list = data.result.scoreList;
									for(var i = 0; i < list.length; i++) {
										createEvaluateItem(list[i].evaluateId, list[i].type, list[i].value);
									}
									break;
								case 'isGood': // 是否评论
									if(!o) {
										$(evaluateMsg).show();
									} else {
										$(".my-artshow-evaliate").show();
										$("#myArtshowEvaliate").text(data.result.evaluation);
									}
									break;
								case 'goodLevel': // 好评
									changeLevel(o);
									break;
								default:
									break;
							}
						});
					} else {
						mui.toast(data.msg);
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				// 点击星星评分
				mui('.evaliate-area').on('tap', 'i.iconfont', function() {
					if(!complete) {
						$(this).addClass('active').html('&#xe60f;')
							.prevAll('i.iconfont').addClass('active').html('&#xe60f;')
							.end().nextAll('i.iconfont').addClass('active').html('&#xe65c;')
							.end().siblings('label').find('span:last-child').text($(this).index());
					} else {
						mui.toast('您已作出评价，不能修改');
					}
				})

				// 是否满意
				mui(artistEvaliate).on('tap', 'span', function() {
					if(!complete) {
						$(this).addClass('selected').siblings('span').removeClass('selected');
					} else {
						mui.toast('您已作出评价，不能修改');
					}
				})

				// 提交评价
				mui('.mui-content').on('tap', 'button', function() {
					var allRight = true;
					if(!$("span", $(artistEvaliate)).hasClass('selected') || !evaluateMsg.value) {
						allRight = false;
					}
					$(".evaliate-item span:last-child").each(function() {
						if(!Number($(this).text())) {
							allRight = false;
						}
					})
					if(allRight) {
						var evalInfo = {};
						evalInfo.evaluation = evaluateMsg.value;
						evalInfo.isGood = 1;
						evalInfo.goodLevel = Number(!$("span.selected", $(artistEvaliate)).index('.artist-evaliate span'));
						var scoreList = [];
						$(".evaliate-item").each(function() {
							var score = {};
							score.evaluateId = $(this).find('span.label').text();
							score.id = '';
							score.uid = artistId;
							score.performanceId = artshowId;
							score.type = $(this).find('i').length;
							score.value = Number($(this).find('span:last-child').text());
							scoreList.push(score);
						})
						evalInfo.scoreList = scoreList;
						console.log(JSON.stringify(evalInfo));
						
						Common.ajax({
							url : baseURL + 'setEvaluate.json',
							type : 'POST',
							data : 'key=' + JSON.stringify(evalInfo)
						}, function(data) {
							var data = JSON.parse(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('评价成功');
								var artshowPage = plus.webview.currentWebview().opener();
								mui.fire(artshowPage, 'reload', {});
								oldBack();
							} else {
								mui.toast('操作失败，'+data.msg);
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('请完善评价信息后再提交');
					}
				})

				// 满意度
				function changeLevel(level) {
					if(level == 2) {
						$(artistEvaliate).find('span').removeClass('selected');
					} else {
						$(artistEvaliate).find('span:eq(' + (level) + ')').removeClass('selected')
							.siblings('span').addClass('selected');
					}
				}

				/**
				 * 艺人打分项
				 * @param {Object} label	项名
				 * @param {Object} max		最大分数
				 * @param {Object} value	打分数
				 */
				function createEvaluateItem(label, max, value) {
					var item = document.createElement("div");
					item.className = 'evaliate-item';
					var str = '<label><span class="label">' + label + '</span>：' + '<span>' + value + '</span></label>';
					for(var i = 1; i <= max; i++) {
						str += '<i class="iconfont ' + (value ? 'active' : '') + '">&#xe';
						str += (i > value ? '65c' : '60f') + ';</i>';
					}
					item.innerHTML = str;
					document.getElementById("evaliateItems").appendChild(item);
				}
			})
		</script>
	</body>

</html>